<style lang="less">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>门区管理</h4>
        <Alert show-icon>
            此处用于门区管理。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="addModal=true">
                <Icon type="md-add-circle"/>
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle"/>
                删除
            </Button>
            <Button type="info" @click="backGoJump()">
                <Icon type="md-return-left"/>
                返回区域管理
            </Button>
        </ButtonGroup>
        <Row>
            <Col span="20">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>

        <!--添加-->
        <Modal v-model="addModal" title="添加" @on-ok="handleSubmitAdd('formValidate')"
               @on-cancel="addModal =false">
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Form-item label="门区名称" prop="GateName">
                    <i-input v-model="formValidate.GateName" placeholder="请输入门区名称"></i-input>
                </Form-item>
                <Form-item label="备注" prop="Comment">
                    <i-input v-model="formValidate.Comment" placeholder="请输入门区描述或门区控制区域描述"></i-input>
                </Form-item>
                <Form-item label="远端客户端IP" prop="RemoteIP">
                    <i-input v-model="formValidate.RemoteIP" type="" placeholder="请输入远端客户端IP"></i-input>
                </Form-item>
                <Form-item label="语音串口号" prop="Voicecom">
                    <i-input v-model="formValidate.Voicecom" type="number" placeholder="请输入语音串口号"></i-input>
                </Form-item>
                <Form-item label="通行时间">
                    <Row type="flex">
                        <Col span="6">
                            <Time-picker :value="formValidate.Starttime" format="HH:mm" @on-change="changeStartDate2"
                                         type="time"
                                         placement="bottom-end"
                                         placeholder="选择时间" width="280px"></Time-picker>
                        </Col>
                        <span> - </span>
                        <Col span="6">
                            <Time-picker :value="formValidate.Endtime" format="HH:mm" @on-change="changeEndDate2"
                                         type="time"
                                         placement="bottom-end"
                                         placeholder="选择时间" width="280px">
                            </Time-picker>
                        </Col>

                        <Col style="margin-left: 20px" span="6">
                            <Checkbox @on-change="checkboxChange()" v-model="allDay">全天通行</Checkbox>
                        </Col>

                    </Row>
                </Form-item>

            </Form>
        </Modal>

        <!--编辑-->
        <Modal v-model="editIsShow" title="编辑" @on-ok="handleSubmitEdit('formValidate2')"
               @on-cancel="editIsShow =false">
            <Form ref="formValidate2" :model="formValidate2" :label-width="100">
                <Form-item label="门区名称" prop="Gatename">
                    <i-input v-model="formValidate2.Gatename" placeholder="请输入门区名称"></i-input>
                </Form-item>
                <Form-item label="备注" prop="Comment">
                    <i-input v-model="formValidate2.Comment" placeholder="请输入门区描述或门区控制区域描述"></i-input>
                </Form-item>
                <Form-item label="远端客户端IP" prop="Remoteip">
                    <i-input v-model="formValidate2.Remoteip" placeholder="请输入远端客户端IP"></i-input>
                </Form-item>
                <Form-item label="通行时间">
                    <Row type="flex">
                        <Col span="6">
                            <Time-picker :value="formValidate2.starttime" format="HH:mm" @on-change="changeStartDate2"
                                         type="time"
                                         placement="bottom-end"
                                         placeholder="选择时间" width="280px"></Time-picker>
                        </Col>
                        <span> - </span>
                        <Col span="6">
                            <Time-picker :value="formValidate2.endtime" format="HH:mm" @on-change="changeEndDate2"
                                         type="time"
                                         placement="bottom-end"
                                         placeholder="选择时间" width="280px">
                            </Time-picker>
                        </Col>

                        <Col style="margin-left: 20px" span="6">
                            <Checkbox @on-change="checkboxChange()" v-model="allDay">全天通行</Checkbox>
                        </Col>

                    </Row>
                </Form-item>

                <Form-item label="区域" prop="Areaid">
                    <i-select v-model="formValidate2.Areaid" placeholder="请选择区域">
                        <template v-for="(item,index) in areaArr">
                            <i-option :value="item.Id">{{item.Areatitle}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
            </Form>
        </Modal>

    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                //添加
                formValidate: {
                    //添加字段
                    GateName: '',
                    RemoteIP: '',
                    Voicecom: '',
                    Areaid: '',
                    Starttime: '',
                    Endtime: '',
                    Comment: '',
                },
                allDay:false,
                addModal: false,
                //编辑
                formValidate2: {
                    //添加字段
                    Gatename: '',
                    Comment: '',
                    Id: '',
                    Areaid: '',
                    Remoteip: '',
                    starttime: '',
                    endtime: ''
                },
                areaArr: [],
                editIsShow: false,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                //表格
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '门区名称',
                        key: 'Gatename',
                        align: 'center',

                    },
                    {
                        title: '门区描述或门区控制区域描述',
                        key: 'Comment',
                        align: 'center',
                    },
                    {
                        title: '远端客户端IP',
                        key: 'Remoteip',
                        align: 'center',
                    },
                    {
                        title: '区域',
                        key: 'Title',
                        align: 'center',
                    },
                    {
                        title: '允许通行开始时间',
                        key: 'StartTime',
                        align: 'center',
                    },
                    {
                        title: '允许通行结束时间',
                        key: 'EndTime',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: '',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.editClick(params.row)
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'GateSubList')
                                            }
                                        }
                                    }, '子系统管理'),
                                ]
                            )
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.getAreaData();
        },
        methods: {
            //backJump
            backGoJump: function () {
                this.$router.back(-1)
            },
            //跳转
            jumpPage: function (id, url) {
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    if (id > 0) {
                        route = {
                            path: url,
                            query: {
                                id: id
                            },
                        };
                    } else {
                        route = {
                            path: url,
                        };
                    }

                }
                this.$router.push(route);
            },
            changeStartDate: function (date) {
                console.log(date);
                this.formValidate.Starttime = date;
                console.log('starttime:', this.formValidate.Starttime);
            },
            changeEndDate: function (date) {
                console.log(date);
                this.formValidate.Endtime = date;
            },
            changeStartDate2: function (date) {
                console.log(date);
                this.formValidate2.starttime = date;
                console.log('starttime:', this.formValidate.Starttime);
            },
            changeEndDate2: function (date) {
                console.log(date);
                this.formValidate2.endtime = date;
            },
            getAreaData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetAreas, para, function (res) {
                    that.$Loading.finish();
                    that.areaArr = res.Msg;
                });

            },

            mockTableData() {
                let that = this;

                let para = {
                    id: that.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GateServerList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                    console.log('tableData:', res)

                });

            },
            //添加
            handleSubmitAdd(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                });
            },
            addData: function (model) {
                let that = this;

                model.Areaid =that.$route.query.id;
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                console.log('params',model);

                apiUtil.post(that, apiUtil.urls.AddGateServer, params, function (res) {
                    that.$Loading.finish();
                    that.addModal = false;
                    that.mockTableData();
                    that.$Message.info('添加成功 ')
                    that.handleReset('formValidate');


                });
            },

            //checkboxChange
            checkboxChange:function(){
                console.log('checkboxChange:',this.allDay)
                if(this.allDay){
                    this.formValidate.Starttime="00:00";
                    this.formValidate.Endtime="23:59";
                }else {
                    this.formValidate.Starttime="00:00";
                    this.formValidate.Endtime="00:00";
                }
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的区域项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.DelGateServer, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },

            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            //编辑相关
            //点击编辑
            editClick: function (row) {

                this.editIsShow = true;
                this.formValidate2.Gatename = row.Gatename;
                this.formValidate2.Comment = row.Comment;
                this.formValidate2.Remoteip = row.Remoteip;
                this.formValidate2.Areaid = row.Areaid;
                this.formValidate2.Id = row.Id;
                this.formValidate2.starttime = row.StartTime;
                this.formValidate2.endtime = row.EndTime;
            },
            handleSubmitEdit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPSEdit(model);
                })
            },
            comfirmModifyPSEdit: function (model) {
                let that = this;
                let params = {};

                params = that.$qs.stringify(model);
                console.log('params:', params)
                apiUtil.post(that, apiUtil.urls.EditGate, params, function (res) {
                    that.$Message.info('修改成功 ')
                    that.mockTableData();

                });
            },
            //重置表单
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
    }
</script>
